<template>
    <div class="pagination">
        <button class="arrow-btn" :disabled="currentPage === 1" @click="handlePrev">
            <svg-icon name="common/arrow-left" />
        </button>
        
        <div class="page-numbers">
            <!-- 第一页 -->
            <button 
                class="page-btn" 
                :class="{ active: currentPage === 1 }"
                @click="handlePageChange(1)"
            >
                1
            </button>
            
            <!-- 省略号 -->
            <span v-if="showLeftEllipsis" class="ellipsis">...</span>
            
            <!-- 中间页码 -->
            <button 
                v-for="page in middlePages" 
                :key="page"
                class="page-btn"
                :class="{ active: currentPage === page }"
                @click="handlePageChange(page)"
            >
                {{ page }}
            </button>
            
            <!-- 省略号 -->
            <span v-if="showRightEllipsis" class="ellipsis">...</span>
            
            <!-- 最后一页 -->
            <button 
                v-if="totalPages > 1"
                class="page-btn" 
                :class="{ active: currentPage === totalPages }"
                @click="handlePageChange(totalPages)"
            >
                {{ totalPages }}
            </button>
        </div>
        
        <button class="arrow-btn" :disabled="currentPage === totalPages" @click="handleNext">
            <svg-icon name="common/arrow-right" />
        </button>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    currentPage: {
        type: Number,
        required: true
    },
    total: {
        type: Number,
        required: true
    },
    pageSize: {
        type: Number,
        required: true
    }
})

const emit = defineEmits(['update:currentPage', 'current-change'])

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(props.total / props.pageSize)
})

// 计算中间显示的页码
const middlePages = computed(() => {
    const pages = []
    const maxVisiblePages = 3
    let start = Math.max(2, props.currentPage - 1)
    let end = Math.min(totalPages.value - 1, start + maxVisiblePages - 1)
    
    if (end - start + 1 < maxVisiblePages) {
        start = Math.max(2, end - maxVisiblePages + 1)
    }
    
    for (let i = start; i <= end; i++) {
        pages.push(i)
    }
    
    return pages
})

// 是否显示左边的省略号
const showLeftEllipsis = computed(() => {
    return middlePages.value[0] > 2
})

// 是否显示右边的省略号
const showRightEllipsis = computed(() => {
    return middlePages.value[middlePages.value.length - 1] < totalPages.value - 1
})

// 处理页码变化
const handlePageChange = (page) => {
    emit('update:currentPage', page)
    emit('current-change', page)
}

// 上一页
const handlePrev = () => {
    if (props.currentPage > 1) {
        handlePageChange(props.currentPage - 1)
    }
}

// 下一页
const handleNext = () => {
    if (props.currentPage < totalPages.value) {
        handlePageChange(props.currentPage + 1)
    }
}
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    
    .arrow-btn {
        width: 40px;
        height: 40px;
        border: 1px solid #EDEFF6;
        border-radius: 4px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        
        .svg-icon {
            width: 16px;
            height: 16px;
            color: #4A60A1;
        }
        
        &:hover:not(:disabled) {
            border-color: #4A60A1;
            background: #4A60A1;
            
            .svg-icon {
                color: #fff;
            }
        }
        
        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
    
    .page-numbers {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .page-btn {
            min-width: 40px;
            height: 40px;
            border: 1px solid #EDEFF6;
            border-radius: 4px;
            background: #fff;
            color: #2F3B59;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover:not(.active) {
                border-color: #4A60A1;
                color: #4A60A1;
            }
            
            &.active {
                background: #4A60A1;
                border-color: #4A60A1;
                color: #fff;
            }
        }
        
        .ellipsis {
            color: #666;
            padding: 0 16px;
        }
    }
}
</style> 